<!doctype html>
<html>
<head>

  <title>core-layout-grid example</title>

  <script src="../platform/platform.js"></script>

  <link rel="import" href="core-layout-grid.html">

  <style>
    body {
      font-family: sans-serif;
      overflow: hidden;
    }
  </style>

</head>
<body unresolved>

  <grid-test></grid-test>

  <polymer-element name="grid-test" on-tap="{{rotate}}">
  <template>

    <style>
      * {
        -webkit-transition: top, right, bottom, left;
        -webkit-transition-duration: 0.3s;
      }

      panel {
        display: inline-block;
        border: 4px dotted lightblue;
        padding: 16px;
        background-color: whitesmoke;
      }

      #outputToolbar {
        width: 400px;
      }

      #output {
        width: 400px;
      }

      #workspace {
        border-color: orange;
      }
    </style>

    <core-layout-grid nodes="{{nodes}}" layout="{{layout}}"></core-layout-grid>

    <panel id="toolbar">toolbar (click to rotate)</panel>
    <panel id="sidebar">sidebar</panel>
    <panel id="workspace">workspace</panel>
    <panel id="outputToolbar">otherbar</panel>
    <panel id="output">
      output
      <h2>Documentation</h2>
      <h1>Verbiage</h1>
      <p>In backbone record integer LED amplified internet protocol a extension reflective. 
      Array kilohertz LED. Wavelength extension patch supporting wave an by prompt.</p>
    </panel>

  </template>
  <script>

    Polymer('grid-test', {
      arrangements: [[
        [1, 1, 1, 1],
        [2, 3, 3, 4],
        [2, 3, 3, 5]
      ], [
        [4, 3, 2],
        [5, 3, 2],
        [5, 1, 1]
      ], [
        [1, 1],
        [2, 3],
        [4, 3]
      ]],

      outputLayout: 0,

      ready: function() {
        this.outputLayoutChanged();
      },

      outputLayoutChanged: function() {
        this.layout = this.arrangements[this.outputLayout];
      },

      toggleLayout: function() {
        this.outputLayout = (this.outputLayout + 1) % this.arrangements.length;
      },

      rotate: function() {
        this.toggleLayout();
      }
    });

  </script>
  </polymer-element>

</body>
</html>
